<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>数组的修改方法 | 皮卡车</title>
    <meta name="description" content="皮卡车的文档, vuepress 文档">
    <meta name="generator" content="VuePress 1.3.1">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="icon" href="/favicon.ico">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="google-site-verification" content="Ld_AEWr30siza2LmmZ12csitRGsSj9gqqEAch0UXkTc">
    
    <link rel="preload" href="/assets/css/0.styles.1a6a4f51.css" as="style"><link rel="preload" href="/assets/js/app.1f0f93c9.js" as="script"><link rel="preload" href="/assets/js/2.f28f3227.js" as="script"><link rel="preload" href="/assets/js/36.981eadca.js" as="script"><link rel="preload" href="/assets/js/3.a7eaa85f.js" as="script"><link rel="prefetch" href="/assets/js/10.7b76d38f.js"><link rel="prefetch" href="/assets/js/100.0d62a3f6.js"><link rel="prefetch" href="/assets/js/101.4916ac0c.js"><link rel="prefetch" href="/assets/js/102.0ee21f66.js"><link rel="prefetch" href="/assets/js/103.872c594c.js"><link rel="prefetch" href="/assets/js/104.0bff815e.js"><link rel="prefetch" href="/assets/js/105.46330c43.js"><link rel="prefetch" href="/assets/js/106.4ad211ca.js"><link rel="prefetch" href="/assets/js/107.d9011871.js"><link rel="prefetch" href="/assets/js/108.bab8ed0e.js"><link rel="prefetch" href="/assets/js/109.b7e4a790.js"><link rel="prefetch" href="/assets/js/11.518e0dbb.js"><link rel="prefetch" href="/assets/js/110.1eb492e8.js"><link rel="prefetch" href="/assets/js/111.ee6a2e31.js"><link rel="prefetch" href="/assets/js/112.05d655c6.js"><link rel="prefetch" href="/assets/js/113.0a4cf8f0.js"><link rel="prefetch" href="/assets/js/114.ef783947.js"><link rel="prefetch" href="/assets/js/115.11bbdb9c.js"><link rel="prefetch" href="/assets/js/116.5646126d.js"><link rel="prefetch" href="/assets/js/117.854d26bf.js"><link rel="prefetch" href="/assets/js/118.1e514b13.js"><link rel="prefetch" href="/assets/js/119.aa944f45.js"><link rel="prefetch" href="/assets/js/12.511e3547.js"><link rel="prefetch" href="/assets/js/120.1c6f450c.js"><link rel="prefetch" href="/assets/js/121.44f16ee6.js"><link rel="prefetch" href="/assets/js/122.f877b8e8.js"><link rel="prefetch" href="/assets/js/123.0563fdd5.js"><link rel="prefetch" href="/assets/js/124.4cd97316.js"><link rel="prefetch" href="/assets/js/125.a502f4ee.js"><link rel="prefetch" href="/assets/js/126.c7e94093.js"><link rel="prefetch" href="/assets/js/127.bd8aed7f.js"><link rel="prefetch" href="/assets/js/128.66063cc3.js"><link rel="prefetch" href="/assets/js/129.21bb1073.js"><link rel="prefetch" href="/assets/js/13.9e5bee4e.js"><link rel="prefetch" href="/assets/js/130.c8edfccb.js"><link rel="prefetch" href="/assets/js/131.7a1f29be.js"><link rel="prefetch" href="/assets/js/132.f589fc06.js"><link rel="prefetch" href="/assets/js/133.55ac5c9a.js"><link rel="prefetch" href="/assets/js/134.eeab127b.js"><link rel="prefetch" href="/assets/js/135.5a1571dd.js"><link rel="prefetch" href="/assets/js/136.b72b4d1c.js"><link rel="prefetch" href="/assets/js/137.678e022a.js"><link rel="prefetch" href="/assets/js/138.ba4108fa.js"><link rel="prefetch" href="/assets/js/139.0b02b599.js"><link rel="prefetch" href="/assets/js/14.b9ec07e6.js"><link rel="prefetch" href="/assets/js/140.690e4e4c.js"><link rel="prefetch" href="/assets/js/141.709da4ed.js"><link rel="prefetch" href="/assets/js/142.f2de76c0.js"><link rel="prefetch" href="/assets/js/143.4dcb17f0.js"><link rel="prefetch" href="/assets/js/144.730ef429.js"><link rel="prefetch" href="/assets/js/145.d881c754.js"><link rel="prefetch" href="/assets/js/146.f3379a41.js"><link rel="prefetch" href="/assets/js/147.eeb9ca6f.js"><link rel="prefetch" href="/assets/js/148.bb6020cd.js"><link rel="prefetch" href="/assets/js/149.1d34dea6.js"><link rel="prefetch" href="/assets/js/15.d0fa1a9d.js"><link rel="prefetch" href="/assets/js/150.599238ba.js"><link rel="prefetch" href="/assets/js/151.9655268f.js"><link rel="prefetch" href="/assets/js/152.1f843fa4.js"><link rel="prefetch" href="/assets/js/153.7af45ca6.js"><link rel="prefetch" href="/assets/js/154.eff93a56.js"><link rel="prefetch" href="/assets/js/155.ff07fba4.js"><link rel="prefetch" href="/assets/js/156.1b1814b7.js"><link rel="prefetch" href="/assets/js/157.8ac4c21b.js"><link rel="prefetch" href="/assets/js/158.aa8a0124.js"><link rel="prefetch" href="/assets/js/159.d61fdb37.js"><link rel="prefetch" href="/assets/js/16.ccd2bd60.js"><link rel="prefetch" href="/assets/js/17.ddc8fde4.js"><link rel="prefetch" href="/assets/js/18.a06e60cc.js"><link rel="prefetch" href="/assets/js/19.64b3dec9.js"><link rel="prefetch" href="/assets/js/20.3615e182.js"><link rel="prefetch" href="/assets/js/21.0c654d53.js"><link rel="prefetch" href="/assets/js/22.720aac8f.js"><link rel="prefetch" href="/assets/js/23.0dc53b91.js"><link rel="prefetch" href="/assets/js/24.d4b75b0e.js"><link rel="prefetch" href="/assets/js/25.9120702e.js"><link rel="prefetch" href="/assets/js/26.b24d89e2.js"><link rel="prefetch" href="/assets/js/27.55df94ab.js"><link rel="prefetch" href="/assets/js/28.250c68a5.js"><link rel="prefetch" href="/assets/js/29.75a3c8f3.js"><link rel="prefetch" href="/assets/js/30.8cdc2fcd.js"><link rel="prefetch" href="/assets/js/31.45303d68.js"><link rel="prefetch" href="/assets/js/32.f4225739.js"><link rel="prefetch" href="/assets/js/33.15b21267.js"><link rel="prefetch" href="/assets/js/34.5baca30b.js"><link rel="prefetch" href="/assets/js/35.5d9dfab1.js"><link rel="prefetch" href="/assets/js/37.cead7f6b.js"><link rel="prefetch" href="/assets/js/38.ee6bcaf1.js"><link rel="prefetch" href="/assets/js/39.e7579788.js"><link rel="prefetch" href="/assets/js/4.494c614b.js"><link rel="prefetch" href="/assets/js/40.01d2b30b.js"><link rel="prefetch" href="/assets/js/41.19cf06ce.js"><link rel="prefetch" href="/assets/js/42.15941cde.js"><link rel="prefetch" href="/assets/js/43.66adb73c.js"><link rel="prefetch" href="/assets/js/44.8d99ed62.js"><link rel="prefetch" href="/assets/js/45.12ea9159.js"><link rel="prefetch" href="/assets/js/46.644efa88.js"><link rel="prefetch" href="/assets/js/47.531131c7.js"><link rel="prefetch" href="/assets/js/48.b214f000.js"><link rel="prefetch" href="/assets/js/49.e42d4b72.js"><link rel="prefetch" href="/assets/js/5.7e277dc8.js"><link rel="prefetch" href="/assets/js/50.de0aa85c.js"><link rel="prefetch" href="/assets/js/51.8be2974c.js"><link rel="prefetch" href="/assets/js/52.cc067888.js"><link rel="prefetch" href="/assets/js/53.4ceb2c6b.js"><link rel="prefetch" href="/assets/js/54.b2647058.js"><link rel="prefetch" href="/assets/js/55.dc3df953.js"><link rel="prefetch" href="/assets/js/56.921a6934.js"><link rel="prefetch" href="/assets/js/57.1e24b1fd.js"><link rel="prefetch" href="/assets/js/58.f4e8ebac.js"><link rel="prefetch" href="/assets/js/59.17ab117b.js"><link rel="prefetch" href="/assets/js/6.4014218f.js"><link rel="prefetch" href="/assets/js/60.352cea9b.js"><link rel="prefetch" href="/assets/js/61.77289388.js"><link rel="prefetch" href="/assets/js/62.ec0ed919.js"><link rel="prefetch" href="/assets/js/63.c75dcb25.js"><link rel="prefetch" href="/assets/js/64.59d15a75.js"><link rel="prefetch" href="/assets/js/65.7e5a14bb.js"><link rel="prefetch" href="/assets/js/66.4e770ba1.js"><link rel="prefetch" href="/assets/js/67.0742f21a.js"><link rel="prefetch" href="/assets/js/68.a6ed34fd.js"><link rel="prefetch" href="/assets/js/69.48c9a47f.js"><link rel="prefetch" href="/assets/js/7.c5ecd7d3.js"><link rel="prefetch" href="/assets/js/70.eb477192.js"><link rel="prefetch" href="/assets/js/71.1be57009.js"><link rel="prefetch" href="/assets/js/72.6859561c.js"><link rel="prefetch" href="/assets/js/73.aae65018.js"><link rel="prefetch" href="/assets/js/74.59d76d34.js"><link rel="prefetch" href="/assets/js/75.04e23427.js"><link rel="prefetch" href="/assets/js/76.74d6eb6a.js"><link rel="prefetch" href="/assets/js/77.fba76057.js"><link rel="prefetch" href="/assets/js/78.0da94b25.js"><link rel="prefetch" href="/assets/js/79.14676976.js"><link rel="prefetch" href="/assets/js/8.08c85334.js"><link rel="prefetch" href="/assets/js/80.7494721f.js"><link rel="prefetch" href="/assets/js/81.f04f6229.js"><link rel="prefetch" href="/assets/js/82.e4c6f74b.js"><link rel="prefetch" href="/assets/js/83.81ad8dbf.js"><link rel="prefetch" href="/assets/js/84.d28e4a3d.js"><link rel="prefetch" href="/assets/js/85.d99fa7fa.js"><link rel="prefetch" href="/assets/js/86.597ecadb.js"><link rel="prefetch" href="/assets/js/87.e6d21734.js"><link rel="prefetch" href="/assets/js/88.b43a52d4.js"><link rel="prefetch" href="/assets/js/89.a5ba287d.js"><link rel="prefetch" href="/assets/js/9.658cd6b3.js"><link rel="prefetch" href="/assets/js/90.c253df12.js"><link rel="prefetch" href="/assets/js/91.8946a93d.js"><link rel="prefetch" href="/assets/js/92.8b8f1ae0.js"><link rel="prefetch" href="/assets/js/93.aa73c784.js"><link rel="prefetch" href="/assets/js/94.9326bcc7.js"><link rel="prefetch" href="/assets/js/95.46b64b79.js"><link rel="prefetch" href="/assets/js/96.61a9b0b9.js"><link rel="prefetch" href="/assets/js/97.65a03aad.js"><link rel="prefetch" href="/assets/js/98.7aa56ed0.js"><link rel="prefetch" href="/assets/js/99.a652c8d5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.1a6a4f51.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">皮卡车</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link router-link-active">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link router-link-active">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JAVASCRIPT</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/" class="sidebar-link">首页</a></li><li><a href="/frontend/javascript/arrow-function.html" class="sidebar-link">箭头函数</a></li><li><a href="/frontend/javascript/can-not-read-property-of-undefined-or-null.html" class="sidebar-link">无法访问 undefined、null 的属性</a></li><li><a href="/frontend/javascript/error.html" class="sidebar-link">Error 类型</a></li><li><a href="/frontend/javascript/function-methods.html" class="sidebar-link">对象的构造函数方法</a></li><li><a href="/frontend/javascript/implicit-coercion.html" class="sidebar-link">隐式转换</a></li><li><a href="/frontend/javascript/invocation-expression.html" class="sidebar-link">调用表达式</a></li><li><a href="/frontend/javascript/invoking-functions.html" class="sidebar-link">函数调用</a></li><li><a href="/frontend/javascript/prototype-chain.html" class="sidebar-link">原型链</a></li><li><a href="/frontend/javascript/resolve-function-call-in-jsx.html" class="sidebar-link">处理 JSX 中函数调用</a></li><li><a href="/frontend/javascript/scope-and-closures.html" class="sidebar-link">作用域与闭包</a></li><li><a href="/frontend/javascript/statements-and-expressions.html" class="sidebar-link">语句和表达式</a></li><li><a href="/frontend/javascript/this-identifier.html" class="sidebar-link">this 关键字</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>对象方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/object-constructor-methods.html" class="sidebar-link">对象的构造函数方法</a></li><li><a href="/frontend/javascript/object-constructor-methods-freeze.html" class="sidebar-link">对象构造函数冻结方法</a></li><li><a href="/frontend/javascript/object-constructor-methods-property.html" class="sidebar-link">对象构造函数属性方法</a></li><li><a href="/frontend/javascript/object-instance-methods.html" class="sidebar-link">对象的实例函数方法</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>数组方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/array.html" class="sidebar-link">数组</a></li><li><a href="/frontend/javascript/array-accessor-methods.html" class="sidebar-link">数组的访问方法</a></li><li><a href="/frontend/javascript/array-iteration-methods.html" class="sidebar-link">数组的迭代方法</a></li><li><a href="/frontend/javascript/array-mutator-methods.html" class="active sidebar-link">数组的修改方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-copywithin" class="sidebar-link">Array.prototype.copyWithin</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-fill" class="sidebar-link">Array.prototype.fill</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-pop" class="sidebar-link">Array.prototype.pop</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-push" class="sidebar-link">Array.prototype.push</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-reverse" class="sidebar-link">Array.prototype.reverse</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-shift" class="sidebar-link">Array.prototype.shift</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-sort" class="sidebar-link">Array.prototype.sort</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-splice" class="sidebar-link">Array.prototype.splice</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-mutator-methods.html#array-prototype-unshift" class="sidebar-link">Array.prototype.unshift</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>字符串方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/string-concat.html" class="sidebar-link">字符串拼接方法</a></li><li><a href="/frontend/javascript/string-format.html" class="sidebar-link">字符串格式化方法</a></li><li><a href="/frontend/javascript/string-query.html" class="sidebar-link">字符串查询方法</a></li><li><a href="/frontend/javascript/string-regexp.html" class="sidebar-link">字符串正则方法</a></li><li><a href="/frontend/javascript/string-substring.html" class="sidebar-link">字符串截取方法</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="array-prototype-copywithin"><a href="#array-prototype-copywithin" class="header-anchor">#</a> Array.prototype.copyWithin</h2> <h3 id="_1-语法"><a href="#_1-语法" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.copyWithin(target[, start[, end]])</p></div> <p>参数：</p> <ul><li>target：索引（复制序列到该位置）。如果是负数，则从末尾开始，若大于等于 <code>arr.length</code>，则不发生拷贝；</li> <li>start：索引（开始复制元素的起始位置），负数同上，默认为 0；</li> <li>end：索引（开始复制元素的结束位置），负数同上，默认为 <code>arr.length</code>。</li></ul> <p>返回值：</p> <p>改变后的数组。</p> <h3 id="_2-描述"><a href="#_2-描述" class="header-anchor">#</a> 2. 描述</h3> <p><code>copyWithin()</code> 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。</p> <p>参数 <code>target</code>、<code>start</code>、<code>end</code> 必须为整数。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>尚未使用过。</li></ul></blockquote> <h3 id="_3-示例"><a href="#_3-示例" class="header-anchor">#</a> 3. 示例</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// target</span>
numbers<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 1, 2, 3]</span>
numbers<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//  [1, 2, 1, 2, 1]</span>
<span class="token comment">// target、start</span>
numbers<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//  [2, 1, 1, 2, 1]</span>
numbers<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//  [2, 1, 2, 1, 1]</span>
<span class="token comment">// target、start、end</span>
numbers<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//   [2, 1, 2, 1, 2]</span>

<span class="token comment">// 类数组</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span>length<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {0: 1, 3: 1, length: 5}</span>

<span class="token keyword">let</span> i32a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Int32Array</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
i32a<span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Int32Array [3, 4, 5, 4, 5]</span>

<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">copyWithin</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Int32Array</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Int32Array [4, 2, 3, 4, 5]</span>
</code></pre></div><h2 id="array-prototype-fill"><a href="#array-prototype-fill" class="header-anchor">#</a> Array.prototype.fill</h2> <h3 id="_1-语法-2"><a href="#_1-语法-2" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.fill(value[, start[, end]])</p></div> <p>参数：</p> <ul><li>value：用来填充数组元素的值；</li> <li>start：起始索引，默认 0；</li> <li>end：终止索引，默认 <code>this.length</code>。</li></ul> <p>返回值：</p> <p>修改后的数组。</p> <h3 id="_2-描述-2"><a href="#_2-描述-2" class="header-anchor">#</a> 2. 描述</h3> <p><code>fill</code> 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，但不包括终止索引。</p> <p><code>fill</code> 方法故意被设计为通用方法，该方法不要求 <code>this</code> 是数组对象。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>常用于快速填充数组。</li></ul></blockquote> <h3 id="_3-示例-2"><a href="#_3-示例-2" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>base examples</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>               <span class="token comment">// [4, 4, 4]</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>            <span class="token comment">// [1, 4, 4]</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>         <span class="token comment">// [1, 4, 3]</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>         <span class="token comment">// [1, 2, 3]</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>         <span class="token comment">// [1, 2, 3]</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// [4, 2, 3]</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// [1, 2, 3]</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>         <span class="token comment">// [1, 2, 3]</span>
<span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                <span class="token comment">// [4, 4, 4]</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span> length<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// {0: 4, 1: 4, 2: 4, length: 3}</span>

<span class="token comment">// Objects by reference.</span>
<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// [{}, {}, {}];</span>
arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>hi <span class="token operator">=</span> <span class="token string">&quot;hi&quot;</span><span class="token punctuation">;</span> <span class="token comment">// [{ hi: &quot;hi&quot; }, { hi: &quot;hi&quot; }, { hi: &quot;hi&quot; }]</span>
</code></pre></div></li> <li><p>generate a two-dimensional array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [[], [], [], [], [], [], [], [], [], []];</span>
</code></pre></div></li></ul> <h2 id="array-prototype-pop"><a href="#array-prototype-pop" class="header-anchor">#</a> Array.prototype.pop</h2> <h3 id="_1-语法-3"><a href="#_1-语法-3" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.pop()</p></div> <p>返回值：</p> <p>从数组中删除的元素，当数组为空时返回 undefined。</p> <h3 id="_2-描述-3"><a href="#_2-描述-3" class="header-anchor">#</a> 2. 描述</h3> <p>pop() 方法从数组中删除最后一个元素，并返回该元素的值，此方法更改数组的长度。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>需要从尾端删除数据时。</li></ul></blockquote> <h3 id="_3-示例-3"><a href="#_3-示例-3" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>removing the last element of an array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> myFish <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'sturgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> popped <span class="token operator">=</span> myFish<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['angel', 'clown', 'mandarin' ]  'sturgeon'</span>
</code></pre></div></li> <li><p>using apply() or call() on array-like objects</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> myFish <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">0</span><span class="token operator">:</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span><span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span><span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token operator">:</span><span class="token string">'sturgeon'</span><span class="token punctuation">,</span> length<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> popped <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>myFish<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {0:'angel', 1:'clown', 2:'mandarin', length: 3}  'sturgeon'</span>
</code></pre></div></li></ul> <h2 id="array-prototype-push"><a href="#array-prototype-push" class="header-anchor">#</a> Array.prototype.push</h2> <h3 id="_1-语法-4"><a href="#_1-语法-4" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.push(element1, ..., elementN)</p></div> <p>参数：</p> <ul><li>elementN：被添加到数组末尾的元素。</li></ul> <p>返回值：</p> <p>返回新的 length 属性值。</p> <h3 id="_2-描述-4"><a href="#_2-描述-4" class="header-anchor">#</a> 2. 描述</h3> <p>push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>需要追加数据时。</li></ul></blockquote> <h3 id="_3-示例-4"><a href="#_3-示例-4" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>adding elements to an array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> sports <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'soccer'</span><span class="token punctuation">,</span> <span class="token string">'baseball'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> total <span class="token operator">=</span> sports<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'football'</span><span class="token punctuation">,</span> <span class="token string">'swimming'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['soccer', 'baseball', 'football', 'swimming'] 4</span>
</code></pre></div></li> <li><p>merging two arrays</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> vegetables <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'parsnip'</span><span class="token punctuation">,</span> <span class="token string">'potato'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> moreVegs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'celery'</span><span class="token punctuation">,</span> <span class="token string">'beetroot'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>vegetables<span class="token punctuation">,</span> moreVegs<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['parsnip', 'potato', 'celery', 'beetroot']</span>
</code></pre></div></li> <li><p>using an object in an array-like fashion</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  length<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 2</span>
  
  <span class="token function-variable function">addElem</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">elem</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> elem<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

obj<span class="token punctuation">.</span><span class="token function">addElem</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">addElem</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul> <h2 id="array-prototype-reverse"><a href="#array-prototype-reverse" class="header-anchor">#</a> Array.prototype.reverse</h2> <h3 id="_1-语法-5"><a href="#_1-语法-5" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.reverse()</p></div> <p>返回值：</p> <p>改变（颠倒）后的数组。</p> <h3 id="_2-描述-5"><a href="#_2-描述-5" class="header-anchor">#</a> 2. 描述</h3> <p>reverse() 方法将数组中元素的位置颠倒，并返回该数组。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>颠倒数组。</li></ul></blockquote> <h3 id="_3-示例-5"><a href="#_3-示例-5" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>reversing the elements in an array-like object</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">0</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> length<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {0: 3, 1: 2, 2: 1, length: 3}</span>
</code></pre></div></li></ul> <h2 id="array-prototype-shift"><a href="#array-prototype-shift" class="header-anchor">#</a> Array.prototype.shift</h2> <h3 id="_1-语法-6"><a href="#_1-语法-6" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.shift()</p></div> <p>返回值：</p> <p>从数组中删除的元素，如果数组为空则返回 undefined。</p> <h3 id="_2-描述-6"><a href="#_2-描述-6" class="header-anchor">#</a> 2. 描述</h3> <p>shift 方法移除索引为 0 的元素（即第一个元素），并返回被移除的元素，其他元素的索引值随之减 1（push、pop 操作不会影响其余元素，所以性能更高）。</p> <p>shift 方法并不限于数组，可以通过 call、apply 方法作用于类数组的对象上。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>需要删除前一部分时。</li></ul></blockquote> <h3 id="_3-示例-6"><a href="#_3-示例-6" class="header-anchor">#</a> 3. 示例</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> fish <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'surgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
fish<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;angel&quot;</span>
</code></pre></div><h2 id="array-prototype-sort"><a href="#array-prototype-sort" class="header-anchor">#</a> Array.prototype.sort</h2> <h3 id="_1-语法-7"><a href="#_1-语法-7" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.sort([compareFunction])</p></div> <p>参数：</p> <ul><li>compareFunction：用来指定按某种顺序进行排列的函数。
<ul><li>firstEl：第一个用于比较的元素；</li> <li>secondEl：第二个用于比较的元素。</li></ul></li></ul> <p>返回值：</p> <p>排序后的数组。</p> <h3 id="_2-描述-7"><a href="#_2-描述-7" class="header-anchor">#</a> 2. 描述</h3> <p>sort 方法用<a href="https://en.wikipedia.org/wiki/In-place_algorithm" target="_blank" rel="noopener noreferrer">原地算法<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>排序。</li></ul></blockquote> <h3 id="_3-示例-7"><a href="#_3-示例-7" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>sorting non-ASCII characters</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'réservé'</span><span class="token punctuation">,</span> <span class="token string">'premier'</span><span class="token punctuation">,</span> <span class="token string">'cliché'</span><span class="token punctuation">,</span> <span class="token string">'communiqué'</span><span class="token punctuation">,</span> <span class="token string">'café'</span><span class="token punctuation">,</span> <span class="token string">'adieu'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
items<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']</span>
</code></pre></div></li> <li><p>sorting with map</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Delta'</span><span class="token punctuation">,</span> <span class="token string">'alpha'</span><span class="token punctuation">,</span> <span class="token string">'CHARLIE'</span><span class="token punctuation">,</span> <span class="token string">'bravo'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> mapped <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>index<span class="token operator">:</span> i<span class="token punctuation">,</span> value<span class="token operator">:</span> el<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

mapped<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span>value <span class="token operator">&gt;=</span> b<span class="token punctuation">.</span>value <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
mapped<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">el</span> <span class="token operator">=&gt;</span> list<span class="token punctuation">[</span>el<span class="token punctuation">.</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul> <h2 id="array-prototype-splice"><a href="#array-prototype-splice" class="header-anchor">#</a> Array.prototype.splice</h2> <h3 id="_1-语法-8"><a href="#_1-语法-8" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])</p></div> <p>参数：</p> <ul><li>start：指定修改的开始位置（从0计数），如果超出了数组的长度，则从数组末尾开始添加内容；</li> <li>deleteCount：整数，表示要移除的数组元素的个数；</li> <li>item1, item2, ...：要添加进数组的元素。</li></ul> <p>返回值：</p> <p>由被删除的元素组成的一个数组，若没有删除元素，则返回空数组。</p> <h3 id="_2-描述-8"><a href="#_2-描述-8" class="header-anchor">#</a> 2. 描述</h3> <p>描述即返回值。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>增删改数组中的元素。</li></ul></blockquote> <h3 id="_3-示例-8"><a href="#_3-示例-8" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>remove 0(zero) elements from index 2, and insert &quot;drum&quot; and &quot;guitar&quot;</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fish <span class="token operator">=</span>  <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'sturgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
fish<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'drum'</span><span class="token punctuation">,</span> <span class="token string">'guitar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>remove 1 element from index 3</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fish <span class="token operator">=</span>  <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'sturgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
fish<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>remove 1 element from index 2, and  insert &quot;trumpet&quot;</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fish <span class="token operator">=</span>  <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'sturgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
fish<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'trumpet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>remove 2 elements from index 0, and insert &quot;parrot&quot;, &quot;anemone&quot; and &quot;blue&quot;</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fish <span class="token operator">=</span>  <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'sturgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
fish<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'parrot'</span><span class="token punctuation">,</span> <span class="token string">'anemone'</span><span class="token punctuation">,</span> <span class="token string">'blue'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>remove 1 element from index-2</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fish <span class="token operator">=</span>  <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'sturgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
fish<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>remove all elements after index 2</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fish <span class="token operator">=</span>  <span class="token punctuation">[</span><span class="token string">'angel'</span><span class="token punctuation">,</span> <span class="token string">'clown'</span><span class="token punctuation">,</span> <span class="token string">'mandarin'</span><span class="token punctuation">,</span> <span class="token string">'sturgeon'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
fish<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul> <h2 id="array-prototype-unshift"><a href="#array-prototype-unshift" class="header-anchor">#</a> Array.prototype.unshift</h2> <h3 id="_1-语法-9"><a href="#_1-语法-9" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.unshift(element1, ..., elementN)</p></div> <p>参数：</p> <ul><li>elementN：要添加到数组开头的元素或多个元素。</li></ul> <p>返回值：</p> <p>返回其 length 属性值。</p> <h3 id="_2-描述-9"><a href="#_2-描述-9" class="header-anchor">#</a> 2. 描述</h3> <p>unshift 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>常用于在数组前添加数据。</li></ul></blockquote> <h3 id="_3-示例-9"><a href="#_3-示例-9" class="header-anchor">#</a> 3. 示例</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span>
<span class="token comment">// arr [[-4, -3], 0, 1, 2]</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2020年3月17日星期二下午2点47分</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/frontend/javascript/array-iteration-methods.html" class="prev">
        数组的迭代方法
      </a></span> <span class="next"><a href="/frontend/javascript/string-concat.html">
        字符串拼接方法
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.1f0f93c9.js" defer></script><script src="/assets/js/2.f28f3227.js" defer></script><script src="/assets/js/36.981eadca.js" defer></script><script src="/assets/js/3.a7eaa85f.js" defer></script>
  </body>
</html>
